<template>
  <div class="splitScreen">
    <el-form-item :label="$t('screen.splitScreenName')+' :'">
      <span>{{screen_name}}</span>
    </el-form-item>
    <el-form-item :label="$t('screen.splitScreenSize')+' :'">
      <span>{{screen_show_size}}</span>
    </el-form-item>
    <el-form-item :label="$t('screen.splitScreenValue')+' :'">
      <span>{{screen_value}}</span>
    </el-form-item>
    <el-form-item :label="$t('screen.splitScreenResource')+' :'">
      <el-checkbox-group v-model="screen_play_type">
        <el-checkbox label="1" disabled>图片</el-checkbox>
        <el-checkbox label="2" disabled>视频</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: "SplitScreen",
  props: {
    idx: {
      type: Number,
      default: 0
    },
    name: {
      type: String,
      default: ""
    },
    show_size: {
      type: String,
      default: ""
    },
    value: {
      type: String,
      default: ""
    },
    play_type: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      screen_name: "",
      screen_show_size: "",
      screen_value: "",
      screen_play_type: "",
      screen_idx: ""
    };
  },
  watch: {
    idx: {
      handler: function(val, oldval) {
        this.screen_idx = this.idx;
      },
      deep: true,
      immediately: true
    },
    name: {
      handler: function(val, oldval) {
        this.screen_name = this.name;
      },
      deep: true,
      immediately: true
    },
    show_size: {
      handler: function(val, oldval) {
        this.screen_show_size = this.show_size;
      },
      deep: true,
      immediately: true
    },
    value: {
      handler: function(val, oldval) {
        this.screen_value = this.value;
      },
      deep: true,
      immediately: true
    },
    play_type: {
      handler: function(val, oldval) {
        this.screen_play_type = this.play_type;
      },
      deep: true,
      immediately: true
    }
  },
  mounted() {
    this.screen_name = this.name;
    this.screen_show_size = this.show_size;
    this.screen_value = this.value;
    this.screen_play_type = this.play_type;
    this.screen_idx = this.idx;
  },
  methods: {}
};
</script>
<style scoped>
.splitScreen {
  border: 1px solid #ccc;
  padding-top: 20px;
  margin-bottom: 20px;
  position: relative;
}
.splitScreen .closeBox {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}
.splitScreen .closeBox:hover {
  color: #ccc;
}
</style>
